import { WeaDialog, WeaAlertPage, WeaNewScroll } from "ecCom";
import { Row, Col, Button, Icon, Modal } from "antd";
import CoworkConstant from "../../../util/CoworkConstant";
import { inject, observer } from "mobx-react";
import { toJS } from "mobx";
import { WeaTableNew } from "comsMobx";
let WeaTable = WeaTableNew.WeaTable;
import CoworkTypeInfo from "./CoworkTypeInfo";
import { WeaLocaleProvider } from "ecCom";
const getLabel = WeaLocaleProvider.getLabel;

@inject("coworkMainStore")
@observer
class CoworkTypeDialog extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      visible: false,
      height: 480,
    };
  }

  componentDidMount() {
    const { coworkMainStore } = this.props;
    coworkMainStore.getCoworkTypeList();
  }

  render() {
    const { coworkMainStore } = this.props,
      { typeTableStore } = coworkMainStore;
    let config = toJS(coworkMainStore.config),
      { typeListSessionKey } = config,
      { selectedRowKeys = [] } = typeTableStore;
    let { visible, height } = this.state;
    return (
      <WeaDialog
        style={{ width: 700, height: 480 }}
        visible={visible}
        title={`${getLabel(34073, "协作版块")}${getLabel(130599, "设置")}`}
        icon={CoworkConstant.iconClassName}
        iconBgcolor={CoworkConstant.iconBgColor}
        onCancel={this.back}
        onChangeHeight={this.changeHeight}
        buttons={[
          <Button onClick={this.back}>{getLabel(1290, "返回")}</Button>,
        ]}
      >
        <div className="wea-cowork-scope">
          <div className="wea-table-edit">
            <Row className="wea-table-edit-title">
              <Col>
                <span>{getLabel(34073, "协作版块")}</span>
                <Button
                  type="primary"
                  title={getLabel(91, "删除")}
                  size="small"
                  onClick={this.doDelete}
                  disabled={selectedRowKeys && selectedRowKeys.length == 0}
                >
                  <Icon type="minus" />
                </Button>
                <Button
                  type="primary"
                  title={getLabel(1421, "新增")}
                  size="small"
                  onClick={this.doAdd}
                >
                  <Icon type="plus" />
                </Button>
              </Col>
            </Row>
            <WeaTable
              onOperatesClick={this.onOperatesClick}
              getColumns={this.getColumns}
              comsWeaTableStore={typeTableStore}
              scroll={{ y: height - 140 }}
            />
          </div>
        </div>
        <CoworkTypeInfo
          ref="type"
          callback={coworkMainStore.getCoworkTypeList}
        />
      </WeaDialog>
    );
  }

  doAdd = () => {
    this.openTypeInfo();
  };

  doDelete = () => {
    const { coworkMainStore } = this.props,
      { typeTableStore } = coworkMainStore;
    let config = toJS(coworkMainStore.config),
      selectedRowKeys = toJS(typeTableStore.selectedRowKeys);
    if (selectedRowKeys && selectedRowKeys.length > 0) {
      Modal.confirm({
        content: getLabel(4909, "确认要删除这些版块?", "note"),
        onOk() {
          coworkMainStore.batchDeleteCoworkType(selectedRowKeys);
        },
      });
    }
  };
  open = () => {
    this.setState({
      visible: true,
    });
    const { coworkMainStore } = this.props;
    coworkMainStore.getCoworkTypeList();
  };

  submit = () => {
    this.back();
  };

  back = () => {
    this.setState({
      visible: false,
    });
  };
  onOperatesClick = (record, index, operate, flag) => {
    if (flag == 0) {
      this.openTypeInfo(record.id);
    } else if (flag == 1) {
      const { coworkMainStore } = this.props;
      Modal.confirm({
        content: getLabel(4911, "确认要删除该版块?", "note"),
        onOk() {
          coworkMainStore.batchDeleteCoworkType(record.id);
        },
      });
    }
  };

  getColumns = (columns) => {
    let newColumns = columns.map((column) => {
      if (column.dataIndex == "typename") {
        let newColumn = { ...column };
        newColumn.render = (text, record, index) => {
          return (
            <span
              onClick={this.openTypeInfoPlat(record.id)}
              className="cursor-pointer"
            >
              {column.render(text, record, index)}
            </span>
          );
        };
        return newColumn;
      }

      if (column.dataIndex == "id") {
        let newColumn = { ...column };
        newColumn.render = (text, record, index) => {
          return (
            <span
              onClick={this.openTypeInfoManager(record.id)}
              className="cursor-pointer"
            >
              {column.render(text, record, index)}
            </span>
          );
        };
        return newColumn;
      }

      if (column.dataIndex == "id_str") {
        let newColumn = { ...column };
        newColumn.render = (text, record, index) => {
          return (
            <span
              onClick={this.openTypeInfoMembers(record.id)}
              className="cursor-pointer"
            >
              {column.render(text, record, index)}
            </span>
          );
        };
        return newColumn;
      }

      return column;
    });
    return newColumns;
  };

  openTypeInfo(id) {
    this.refs.type.wrappedInstance.open(id);
  }
  openTypeInfoPlat = (id) => {
    this.refs.type.wrappedInstance.open(id, "plat");
  };
  openTypeInfoManager = (id) => {
    this.refs.type.wrappedInstance.open(id, "principal");
  };
  openTypeInfoMembers = (id) => {
    this.refs.type.wrappedInstance.open(id, "creater");
  };

  changeHeight = (height) => {
    this.setState({ height });
  };
}

export default CoworkTypeDialog;
